/* eslint-disable vue/no-setup-props-destructure */
import type { mapViewPropsType } from './typings'
import { defineComponent, shallowRef, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElLoading } from 'element-plus'
import useAMap from '~/hooks/useAMap'
import useVuexGetters from '~/hooks/useVuexGetters'

export default defineComponent({
  name: 'HotMapView',
  props: ['id', 'markers'],
  setup(props: mapViewPropsType, { expose }) {
    const store = useStore()
    const { id = 'hotContainer' } = props
    const hotMapRef = shallowRef()

    // 获取租户设置的坐标
    const getCurrentTenant = useVuexGetters('user', ['userAddressInfo'])

    onMounted(() => {
      store.dispatch('user/GetCurrentTenant') // 获取租户设置的坐标
    })

    const loading = ElLoading.service({
      target: `#${id}`,
      lock: true,
      text: '加载中'
    })

    const [mapRef, aMapRef] = useAMap(
      id,
      {
        resizeEnable: true,
        center: [
          getCurrentTenant.userAddressInfo.value.lon,
          getCurrentTenant.userAddressInfo.value.lat
        ], // 中心定位点
        zoom: 11
      },
      initAMap
    )

    // 初始化map事件
    function initAMap() {
      loading.close()
      aMapRef.value.plugin(['AMap.HeatMap'], () => {
        hotMapRef.value = new aMapRef.value.HeatMap(mapRef.value, {
          radius: 100, // 给定半径
          opacity: [0, 0.8],
          gradient: {
            0.5: 'blue',
            0.6: 'rgb(117,211,248)',
            0.7: 'rgb(0, 255, 0)',
            0.9: '#ffea00',
            1.0: 'red'
          }
        })
        hotMapRef.value.setDataSet({
          data: props.markers,
          max: 2
        })
      })
    }

    expose({ mapRef, aMapRef })
    return () => <section id={id}></section>
  }
})
